<template>
  <div style="height: 50px"></div>
  <n-form
    ref="formRef"
    :model="formValue"
    :rules="rules"
    :size="'medium'"
    label-placement="left"
    label-width="auto"
    require-mark-placement="right-hanging"
    :style="{
      maxWidth: '750px',
    }"
  >
    <n-form-item
      label="用户名"
      path="account"
    >
      <n-input
        v-model:value="formValue.account"
        placeholder="用户名"
      />
    </n-form-item>
    <n-form-item
      label="文件路径"
      path="dataPath"
    >
      <n-input
        v-model:value="formValue.dataPath"
        placeholder="选择路径"
        :disabled="true"
      />
      <n-button
        attr-type="button"
        @click="editPath"
        >选择文件夹</n-button
      >
    </n-form-item>
    <n-form-item
      label="git项目地址"
      path="git"
    >
      <n-input
        v-model:value="formValue.git"
        placeholder="git项目地址"
      />
    </n-form-item>
    <n-form-item
      label="多少分钟推到git远程"
      path="push2RemoteMin"
    >
      <n-input-number v-model:value="formValue.push2RemoteMin" />
    </n-form-item>
    <n-form-item
      label="回忆录的轮播图"
      path="carouselImg"
    >
      <PicShowList v-model="picShowListModel"></PicShowList>
    </n-form-item>
    <n-form-item>
      <n-button
        attr-type="button"
        @click="handleValidateClick"
      >
        确定
      </n-button>
    </n-form-item>
  </n-form>
</template>
<script setup lang="ts" generic="T extends object & { flag:boolean, hello: string, world?: number }">
import PicShowList from "@/components/common/PicShowList.vue";
import { Setting } from "@model/setting";
import UseSetting from "@pinias/UseSetting";
import UseSurfaceSetting from "@pinias/UseSurfaceSetting";
import { NFormItem, useMessage } from "naive-ui";
import type { FormInst } from "naive-ui";
import { ref, computed, watch, reactive } from "vue";

const { chooseDir, getSetting, setSetting } = UseSetting();
const { getSurfaceSetting } = UseSurfaceSetting();
const surfaceSetting = getSurfaceSetting();
const message = useMessage();

// 父组件数据
const props = defineProps<{ modelValue: T }>();
const emit = defineEmits(["update:modelValue"]);
const modelValue = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val),
});

// 页面数据
class RowData {
  account: string;
  dataPath: string;
  git: string;
  push2RemoteMin: number;
  carouselImg: Array<string>;
  constructor(account: string, dataPath: string, git: string, push2RemoteMin: number, carouselImg: Array<string>) {
    this.account = account;
    this.dataPath = dataPath;
    this.git = git;
    this.push2RemoteMin = push2RemoteMin;
    this.carouselImg = carouselImg;
  }
}
// 轮播图文件
const picShowListModel = reactive({
  toRemovePicList: new Array<string>(),
  picList: new Array<string>(),
  toEdit: true,
});

const getNewFormValue = () => {
  const data = new RowData(
    getSetting().account,
    getSetting().dataPath,
    getSetting().git,
    getSetting().push2RemoteMin,
    surfaceSetting.carouselImg,
  );
  picShowListModel.picList = [...data.carouselImg];
  return data;
};
const formValue = ref(getNewFormValue());
const oldValue = ref(getNewFormValue());
watch(
  //也可以第一参数为响应式数据
  modelValue.value,
  () => {
    formValue.value = getNewFormValue();
    oldValue.value = getNewFormValue();
  },
);

// 限制规则
const formRef = ref<FormInst | null>(null);
const rules = {
  dataPath: {
    required: true,
    message: "请选择路径",
    trigger: ["input"],
  },
  account: {
    required: true,
    message: "请输入昵称",
    trigger: ["input"],
  },
};

// 添加逻辑
// 选择文件地址
const editPath = async () => {
  const path = await chooseDir("");
  if (path.length > 0) {
    formValue.value.dataPath = path;
  }
};
const save = () => {
  if (formValue.value.account.length <= 0) message.error("请输入昵称");
  else if (picShowListModel.picList.length <= 0) message.error("请选择轮播图");
  else {
    if (formValue.value.push2RemoteMin > 0) {
      surfaceSetting.toRemoveMediaPath = [...picShowListModel.toRemovePicList];
      // console.log("surfaceSetting.toRemoveMediaPath", surfaceSetting.toRemoveMediaPath, toRemovePicList);
      picShowListModel.toRemovePicList = [];
      surfaceSetting.carouselImg = picShowListModel.picList;
      if (
        oldValue.value.account !== formValue.value.account ||
        oldValue.value.dataPath !== formValue.value.dataPath ||
        oldValue.value.git !== formValue.value.git ||
        oldValue.value.push2RemoteMin !== formValue.value.push2RemoteMin
      )
        setSetting(
          new Setting(
            formValue.value.dataPath,
            formValue.value.git,
            formValue.value.account,
            formValue.value.push2RemoteMin,
          ),
        );
      message.success("保存成功");
    } else message.error("推送远程的时间必须大于0");
  }
};
const changeFlag = () => (modelValue.value.flag = false);
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault();
  formRef.value?.validate(errors => {
    if (!errors) {
      save();
      changeFlag();
    } else {
      console.log("errors", formRef);
      message.error("不符合要求");
    }
  });
};
</script>

<style scoped></style>
